<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js">
			
		</script>
		<style type="text/css">
			.name{
			         color: green; 
			        }
			.bgd {
					background: red;
			        }
			.ft {
				  font-size: 25px;
			        }
		</style>
		
	</head>
	<body>
		<div id="app">
			<!-- 字符串表达式 -->
			<p :class="nameClass">媛媛</p>
			<!-- 对象表达式 -->
			<p :class="{bgd:isbgd,ft:isfont}" @click="red()" >是个好孩子</p>
			<!-- 数组 -->
			<p :class=["bgd","ft"]>嘻嘻</p>
			<!-- style绑定 -->
			<p :style="{color:activeColor,font:fontSize+'px'}" @click="green()">好好学习</p>
		</div>
	
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					nameClass: 'name',
					isbgd: false,
					isfont: true,
					activeColor: 'red',
					fontSize: 100
				},
				methods:{
					red(){
						return this.isbgd=!this.isbgd
						
					},
					green(){
						return this.activeColor='green';
					}
					
				}
			})
		</script>
	</body>
</html>
